import React from "react";
import Chat, { Bubble, useMessages } from "@chatui/core";
import "./Customer.css";
import { LeftOutline } from "antd-mobile-icons";
import { useNavigate } from "react-router-dom";

const initialMessages = [
  {
    type: "text",
    content: { text: "主人好，我是小蜜，你的贴心小客服~" },
    user: {
      avatar: "//gw.alicdn.com/tfs/TB1DYHLwMHqK1RjSZFEXXcGMXXa-56-62.svg",
    },
  },
];

// 默认快捷短语，可选
const defaultQuickReplies = [
  {
    icon: "message",
    name: "联系人工服务",
    isNew: true,
  },
];

// 回复规则
const replyRules = [
  {
    keyword: "你好",
    response: "您好！有什么可以帮助您的吗？",
  },
  {
    keyword: /问题|帮助/,
    response: "亲，您遇到什么问题啦？请简要描述您的问题~",
  },
  {
    keyword: "衣服",
    response: "请告诉小蜜您的衣服尺寸哦~",
  },
  {
    keyword: "快递",
    response: "您的快递最快好有三天左右，请耐心等待哦~",
  },
  {
    keyword: "谢谢",
    response: "不客气！有其他需要帮助的，请随时告诉我。",
  },
  // 可以添加更多的规则
];

export default function () {
  const navigate = useNavigate();

  // 消息列表
  const { messages, appendMsg, setTyping } = useMessages(initialMessages);

  // 发送回调
  function handleSend(type, val) {
    if (type === "text" && val.trim()) {
      // 发送用户的消息
      appendMsg({
        type: "text",
        content: { text: val },
        position: "right",
      });

      setTyping(true);

      // 模拟客服处理时间
      setTimeout(() => {
        // 尝试匹配回复规则
        const matchedRule = replyRules.find((rule) =>
          typeof rule.keyword === "string"
            ? val.includes(rule.keyword)
            : rule.keyword.test(val)
        );

        // 如果找到了匹配的规则，则使用该规则的响应
        const responseText = matchedRule
          ? matchedRule.response
          : "抱歉，我没有理解您的意思。您可以尝试联系人工服务。";

        // 发送客服的回复
        appendMsg({
          type: "text",
          content: { text: responseText },
        });
      }, 1000);
    }
  }

  // 快捷短语回调，可根据 item 数据做出不同的操作，这里以发送文本消息为例
  function handleQuickReplyClick(item) {
    handleSend("text", item.name);
  }

  function renderMessageContent(msg) {
    const { type, content } = msg;
    switch (type) {
      case "text":
        return <Bubble content={content.text} />;
      case "image":
        return (
          <Bubble type="image">
            <img src={content.picUrl} alt="" />
          </Bubble>
        );
      default:
        return null;
    }
  }

  return (
    <div>
      <header>
        <LeftOutline
          style={{ color: "white", fontSize: "30px" }}
          onClick={() => {
            navigate("/header");
          }}
        />
        <div className="header_ipt">
          <span
            style={{ color: "white", fontSize: "20px", marginLeft: "120px" }}
          >
            我的收藏
          </span>
        </div>
      </header>
      <Chat
        navbar={{ title: "小蜜" }}
        messages={messages}
        renderMessageContent={renderMessageContent}
        quickReplies={defaultQuickReplies}
        onQuickReplyClick={handleQuickReplyClick}
        onSend={handleSend}
        style={{ height: "100vh", with: "100%" }}
      />
    </div>
  );
}
